/**方案优势*/
<template>
  <div class="solution-advantage-page">
    <div class="solution-item-box main-content">
      <div class="item-title-box">{{ title }}</div>
      <div class="solution-line-box"></div>
      <div class="solution-item-row-box">
        <a-row
          type="flex"
          :gutter="{ xs: 15, sm: 20, md: 50, lg: 200 }"
          justify="space-between"
        >
          <a-col :span="12" v-for="item in dataLsit" :key="item.title">
            <div>
              <div class="row-icon-box">
                <img :src="require(`@/assets/solution/${item.icon}.png`)" />
              </div>
              <div class="row-title-box">
                {{ item.title }}
              </div>
              <div class="row-dec-box" v-html="item.dec"></div>
            </div>
            <div class="row-children-box" v-if="item.children">
              <div
                class="children-item-box"
                v-for="cItem in item.children"
                :key="cItem"
              >
                <div class="item-cicle-box"></div>
                <div class="item-title-box">{{ cItem }}</div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    dataLsit: {
      type: Array,
      default: function() {
        return [];
      },
    },
    title: {
      type: String,
      default: function() {
        return "方案优势";
      },
    },
  },
  data() {
    return {
      isMobile: false,
      getter: 200,
    };
  },
  watch: {
    "$store.getters.isMobile"(newVal, oldVal) {
      this.isMobile = newVal;
      this.getter = this.isMobile ? 20 : 200;
    },
  },
  computed: {},

  mounted() {},
};
</script>
<style lang="scss" scoped>
.solution-item-box {
  padding: 3.142857rem 0px;
  .item-title-box {
    font-size: 1.714286rem;
    font-weight: 600;
    color: #444444;
    line-height: 2.571429rem;
  }

  .solution-line-box {
    width: 48px;
    height: 2px;
    background: #31a3ff;
    margin-top: 1.428571rem;
    margin-bottom: 0.928571rem;
  }
  .solution-item-row-box {
    .ant-row {
      display: -webkit-box !important;
    }
    .ant-col {
      margin: 2.5rem 0;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }

    .row-icon-box {
      img {
        width: 48px;
        height: 48px;
      }
    }

    .row-title-box {
      font-size: 1.142857rem;
      font-weight: 600;
      color: #444444;
      line-height: 1.714286rem;
      margin-top: 2.5rem;
      margin-bottom: 1.714286rem;
    }

    .row-dec-box {
      font-size: 1rem;
      font-weight: 300;
      color: #444444;
      line-height: 1.571429rem;
      // width: 65%;
    }
    .row-children-box {
      margin-top: 1.428571rem;
      height: 8.428571rem;
      .children-item-box {
        margin: 0.714286rem 0;
        display: flex;
        align-items: center;
        .item-cicle-box {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #007bff52;
        }
        .item-title-box {
          margin-left: 1.142857rem;
          font-size: 0.857143rem;
          font-weight: 300;
          color: #444444;
          line-height: 1.571429rem;
        }
      }
    }
  }
}
</style>
